<template>
  <div class="finish-com">
    <div ref="maychar" style="width: 900px;height:400px;background-color: rgba(0, 0, 0, 0);">
    </div>
    <div class="lenged">
      <div class="lenged-text">总客流量</div>
      <div class="lenged-text">总消费</div>
    </div>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
export default {
  props: ['value', 'endvalue', 'num'],
  data() {
    return {
      er: [{ value: 1048, name: '2021' },
      { value: 735, name: '2022' },
      { value: 580, name: '2023' }],
      er2: [
        { value: 1048, name: '2021' },
        { value: 735, name: '2022' },
        { value: 580, name: '2023' },
      ]
    }
  },
  mounted() {
    this.getCharts()
  },
  watch: {
    value() {
      this.changey(this.num)
    },
    endvalue() {
      this.changey(this.num)
    },
  },
  methods: {
    changey(a) {
      if (a == "1") {
        this.er = [
          { value: 1248, name: this.value },
          { value: 1548, name: +this.value + 1 },
        ]
        this.er2 = [
          { value: 548, name: this.value },
          { value: 648, name: +this.value + 1 },
        ]
      } else if (a == "2") {
        this.er = [
          { value: 1048, name: this.value },
          { value: 735, name: +this.value + 1 },
          { value: 835, name: +this.value + 2 },
        ]
        this.er2 = [
          { value: 1048, name: this.value },
          { value: 735, name: +this.value + 1 },
          { value: 735, name: +this.value + 2 },
        ]
      }
      else if (a == "3") {
        this.er = [
          { value: 1048, name: this.value },
          { value: 735, name: +this.value + 1 },
          { value: 835, name: +this.value + 2 },
          { value: 935, name: +this.value + 3 },
        ]
        this.er2 = [
          { value: 1048, name: this.value },
          { value: 735, name: +this.value + 1 },
          { value: 735, name: +this.value + 2 },
          { value: 835, name: +this.value + 3 },
        ]
      }
      else if (a == "4") {
        this.er = [
          { value: 1048, name: this.value },
          { value: 735, name: +this.value + 1 },
          { value: 835, name: +this.value + 2 },
          { value: 935, name: +this.value + 3 },
          { value: 935, name: +this.value + 4 },
        ]
        this.er2 = [
          { value: 848, name: this.value },
          { value: 535, name: +this.value + 1 },
          { value: 435, name: +this.value + 2 },
          { value: 535, name: +this.value + 3 },
          { value: 235, name: +this.value + 4 },
        ]
      }
      else if (a == "5") {
        this.er = [
          { value: 848, name: this.value },
          { value: 735, name: +this.value + 1 },
          { value: 535, name: +this.value + 2 },
          { value: 635, name: +this.value + 3 },
          { value: 935, name: +this.value + 4 },
          { value: 935, name: +this.value + 5 },
        ]
        this.er2 = [
          { value: 848, name: this.value },
          { value: 535, name: +this.value + 1 },
          { value: 235, name: +this.value + 2 },
          { value: 545, name: +this.value + 3 },
          { value: 635, name: +this.value + 4 },
          { value: 635, name: +this.value + 5 },
        ]
      }
      this.getCharts()
    },
    getCharts() {
      const chartBox = this.$echarts.init(this.$refs.maychar);
      const option = {

        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'horizontal',
        //   data: ['客流量', '消费'],
        //   textStyle: {
        //     fontSize: 24,
        //     color: '#fff'
        //   },
        //   left: 'center',
        //   top: 'bottom',

        // },
        grid: {

          top: '-10%',
          bottom: '-10%',
          // 是否包含标签,简单来说如果是false,到底部的距离是从坐标轴线开始计算的;如果是true,到底部的距离就是从坐标文字底部开始计算
          containLabel: true,
        },
        series: [
          {
            name: '客流量',
            type: 'pie',
            radius: '50%',
            center: ['25%', '50%'],
            data: this.er,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 万';
              }
            },
            label: {
              show: true,
              textStyle: {
                fontSize: 18,
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#f03',
                    '#0dd',
                    '#91cd77',
                    '#22cd77',
                    '#228877',
                    '#258877',

                  ];
                  return colorList[colors.dataIndex];
                },
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            }
          },
          {
            name: '消费',
            type: 'pie',
            radius: '50%',
            center: ['75%', '50%'],
            data: this.er2,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 万';
              }
            },
            label: {
              show: true,
              textStyle: {
                fontSize: 18,
                color: '#fff'
              }
            },
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    '#f4791f',
                    '#f5af19',
                    '#ffd452',
                    '#f2d452',
                    '#0fd452',
                    '#0fd952',

                  ];
                  return colorList[colors.dataIndex];
                },
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      }, { passive: true });
    }
  }
}
</script>

<style lang="scss" scoped>
.lenged {
  display: flex;
  justify-content: space-around;
  margin-top: -40px;
}
</style>